<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /*清除浏览器默认样式*/
    * {
      margin: 0;
      padding: 0;
    }

    /* 设置外部容器 */
    .wrappers {
      width: 900px;
      height: 6px;
      margin: 100px auto;
    }

    /* 设置进度条容器 */
    .wrapper {
      width: 800px;
      height: 6px;
      margin-bottom: 0;
      line-height: 6px;
      position: relative;
      background-color: hsl(108, 100%, 83%);
    }

    /* 设置进度条显示颜色 */
    #progress {
      width: 0;
      height: 100%;
      background-color: red;
    }

    /* 设置进度条右侧圆点 */
    #progress-bar {
      width: 20px;
      height: 20px;
      position: absolute;
      bottom: -6px;
      border-radius: 50%;
      background-color: hsl(252, 100%, 83%);
    }

    /* 设置显示百分比 */
    #show {
      position: relative;
      left: 840px;
      top: -12px;
    }
  </style>
</head>

<body>
  <!-- 外部容器 -->
  <div class="wrappers">
    <!-- 包裹进度条 -->
    <div class="wrapper">
      <!-- 进度条 -->
      <div id="progress">
        <!-- 进度条右边圆角 -->
        <div id="progress-bar"></div>
      </div>
    </div>
    <!-- 设置进度条默认显示 0%-->
    <span id="show">0%</span>
  </div>
  <script type="text/javascript">
    window.onload = function () {
      // 获取progress对象
      var progress = document.getElementById("progress");
      // 获取show对象
      var show = document.getElementById("show");
      // 获取progress_bar对象
      // 为进度条右侧圆点绑定鼠标按下事件
      var progress_bar = document.getElementById("progress-bar");
      progress_bar.onmousedown = function (event) {
        event = event || window.event;
        //获取圆点偏移量
        var progressLeft = event.clientX - this.offsetLeft;

        // 为右侧圆点绑定拖动事件
        document.onmousemove = function (event) {
          event = event || window.event;
          // 获取鼠标坐标
          var progressX = event.clientX - progressLeft;
          if (progressX <= 0) {
            // 暂停拖动（如果拖动条超出范围，则停止拖动）
            progressX = 0;
          }
          else if (progressX >= 800) {
            progressX = 800;
          }
          console.log(progressX);
          progress_bar.style.left = progressX + "px";
          // 显示进度条
          progress.style.width = progressX + "px";
          // 显示进度条百分比
          show.innerHTML = Math.round(progressX / 8) + "%";

        };

        // 为右侧圆点绑定鼠标抬起事件
        document.onmouseup = function (event) {
          event = event || window.event;
          // 取消鼠标移动事件
          document.onmousemove = null;
          // 取消鼠标抬起事件
          document.onmouseup = null;
        };
        //取消浏览器对拖拽内容进行搜索的默认行为
        return false;
      };

    };
  </script>

</body>

</html>